<!--
 * @Description: ***
 * @Version: 1.0.0
 * @Autor: Caoyingwen
 * @Date: 2021-12-17 09:31:36
 * @LastEditors: Caoyingwen
 * @LastEditTime: 2021-12-29 18:20:00
-->
<template>
  <div>
    <group title="自定义中文显示模板">
      <date-select
        v-model="timeValue"
        placeholder="请选择"
        :min-year="2000"
        :max-year="2016"
        format="YYYY-MM-DD HH:mm"
        @on-change="change"
        title="选择时间"
        year-row="{value}年"
        month-row="{value}月"
        day-row="{value}日"
        hour-row="{value}点"
        minute-row="{value}分"
        confirm-text="确定"
        cancel-text="取消"
      ></date-select>
    </group>
    <group title="插件形式调用">
      <x-input label-width="4em" v-model="timeVal" title='时间' placeholder="I'm placeholder"></x-input>
      <x-button type="primary" @click.native="clickHandle">时间选择</x-button>
    </group>
    <!-- <group title="自定义中文显示模板2">
      <data-select-custom
        v-model="timeValue"
        placeholder="请选择"
        :min-year="2000"
        :max-year="2016"
        format="YYYY-MM-DD HH:mm"
        @on-change="change"
        title="选择时间"
        year-row="{value}年"
        month-row="{value}月"
        day-row="{value}日"
        hour-row="{value}点"
        minute-row="{value}分"
        confirm-text="完成"
        cancel-text="取消"
      ></data-select-custom>
    </group> -->
  </div>
</template>

<script>
import { Group, XButton, XInput  } from "vux";
import DateSelect from "@/components/DateSelect";
// import DataSelectCustom from "@/components/DataSelectCustom/DataSelectCustom";

export default {
  name: "Demopage",
  components: {
    Group,
    DateSelect,
    XButton,
    XInput
    // DataSelectCustom,
  },
  data() {
    return {
      timeValue: "",
      timeVal: ''
    };
  },
  created(){
    // this.requestDemoFn()
  },
  methods: {
    change() {},
    requestDemoFn(){
      this.$http.post('/devApi/test/1', {
      name: 'post---哈哈哈',
        age: 27
      }).then(res => {
        console.log(res, 'res')
      })
    },
    clickHandle() {
      const _this = this
      this.$vux.datetime.show({
        value: _this.timeVal, // 其他参数同 props
        yearRow: '{value}年',
        onHide (type) {
          console.log('---hide')
        },
        onShow () {
          console.log('---show')
        },
        onChange(val) {
          console.log(val, '--change-val')
        },
        onCancel() {
          console.log('---cancel')
        },
        onConfirm(val) {
          _this.timeVal = val
          console.log(val, '---confirm')
        }
      })
    }
  },
};
</script>

<style scoped>
</style>